import {configureStore} from "@reduxjs/toolkit";
import goodsSlice from "@/components/17- redux仓库/01- redux/goodsSlice.js"
import {addGoods} from "@/components/17- redux仓库/01- redux/goodsSlice.js"
import carSlice from "@/components/17- redux仓库/01- redux/carSlice.js"
import {addCar} from "@/components/17- redux仓库/01- redux/carSlice.js"

/**
 * redux：
 *    职责：
 *        将项目中的所有数据状态（行为）进行集中式管理。解决传递参数频繁以及复杂度的问题。
 *    下载：cnpm install @reduxjs/toolkit
 *    名词：
 *         store:仓库，存放你所有的数据。
 *         state:数据。
 *         slice:片区。仓库(store)可以分为若干区域（片区-slice），每个区域都有自己的状态（state)
 *         reducer:工人，每一个片区都有指定的工人。工人会根据指令（action)来对数据进行操作的。
 *         dispatch:下发命令（action)
 *         action:指令（命令）。
 *         总结：通过dispatch来向仓库（store)中的不同片区内(slice)的工人(reducer)发送指令(action)
 *
 *
 * */
const store = configureStore({
    reducer: {
        goodsSlice,
        carSlice: carSlice.reducer
    }
})
// console.log("goodsSlice", goodsSlice) // 得到的是一个函数
// store 的 getState 方法可以获取到 store 中的数据
let {goodsSlice: goodsSliceState} = store.getState();

// unSubscribe 是一个函数，通过运行该函数可以取消订阅。
const unSubscribe = store.subscribe(() => {
    console.log("当数据状态发生更改后执行！", store.getState());
    unSubscribe();
})

// 修改切片中的数据  使用 store 下的 dispatch 方法
store.dispatch(addGoods({
    id: Math.random().toString(36).slice(2),
    name: "商品",
    num: 1
}))

store.dispatch(addCar({
    name: '购物车',
    num: 20
}))

store.dispatch(addCar({
    name: '购物车2',
    num: 200
}))
console.log("goodsSliceState", store.getState())
export default store;